<template>
	<view>
		<!-- 自定义导航栏 -->
		<uni-nav-bar color="#000" background-color="#ffffff" :status-bar="true" left-icon="arrowleft" right-text="发布" @clickLeft="back" @clickRight="submit">
			<view class="row-center w-100" @click="changeAccess">
				{{actionList[actionCurrent].text}}
				<view class="iconfont iconxiala2"></view>
			</view>
		</uni-nav-bar>
		<!-- 多行输入框 -->
		<view class="uni-textarea">
			<textarea :maxlength="textMax" v-model="textContent" placeholder="随便说点儿什么吧..." />
			<view class="position-absolute font-24 text-color3 textarea-remain">
				{{textRemain}}/{{textMax}}
			</view>
		</view>
		<!-- 上传多图 -->
		<com-upload-img :imgList="imgList" @upload="upload"></com-upload-img>
		<!-- 弹出公告 -->
		<u-popup v-model="popupShow" border-radius="20" mode="center" width="80%">
			<view class="column-center m-20">
				<view class="row-center">
					<image class="notice-img" src="/static/img/demo/autumn.svg" mode="widthFix"></image>
				</view>
				<view class="row">
					<view>严禁发表以下信息：</view>
					<view>1、散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的信息</view>
					<view>2、侮辱或者诽谤他人，侵害他人合法权益的信息</view>
					<view>3、煽动民族仇恨、民族歧视，破坏民族团结的信息</view>
				</view>
				<u-button :custom-style="btnStyle" :ripple="true" shape="circle" @click="closePopup">朕知道了</u-button>
			</view>
		</u-popup>
		<!-- 操作菜单 -->
		<u-action-sheet :tips="actionTips" border-radius="20" :list="actionList" v-model="actionShow" @click="selectAction"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 文本输入
				textMax:100,
				textContent:'',
				// 操作菜单
				actionCurrent:0,
				actionTips: {
					text: '请设置您本条信息的访问权限',
					color: '#909399',
					fontSize: 24
				},
				actionList: [
					{ text: '所有人可见' }, 
					{ text: '仅好友可见' }, 
					{ text: '仅自己可见' },
				],
				actionShow: false,
				// 图片列表
				imgList:[],
				// 弹窗公告
				popupShow: true,
				// 按钮配置
				btnStyle: {
					width:"450rpx",
					height:"75rpx",
					background:"linear-gradient(-45deg,#ff8101,#faa035)",
					color:"#FFFFFF",
					fontSize: "30rpx"
				},
				// 已读草稿箱提示
				isReadDraft:false
			}
		},
		computed: {
			// 剩余可输入字数
			textRemain() {
				return this.textMax - this.textContent.length;
			}
		},
		// 监听返回按钮
		onBackPress() {
			// 如果有内容
			if((this.textContent || this.imgList.length) && !this.isReadDraft) {
				this.saveDraft();
				return true; // 不执行默认返回
			}
		},
		methods: {
			// 保存为草稿
			saveDraft() {
					uni.showModal({
						content:"是否要保存为草稿",
						cancelText:"不保存",
						confirmText:"保存",
						success: res => {
							if(res.confirm) {
								console.log("保存缓存");
							}
							this.isReadDraft = true;
							this.$u.route({type:'navigateBack'});
						}
					})
			},
			// 返回
			back() {
				this.$u.route({type:'navigateBack'});
			},
			// 提交
			submit() {
				
			},
			// 选择访问
			changeAccess() {
				this.actionShow = true;
			},
			// 选中操作菜单
			selectAction(idx) {
				this.actionCurrent = idx;
			},
			// 上传文件
			upload(e) {
				this.imgList = e;
			},
			// 关闭公告
			closePopup() {
				setTimeout(() => {
					this.popupShow = false;
				},500)
			}
		}
	}
</script>

<style lang="scss" scoped>
.uni-textarea {
	border: 1rpx solid #EEE;
	position: relative;
	.textarea-remain {
		right: 10rpx;
		bottom: 5rpx;
	}
}
.notice-img {
	height: 300rpx;
	width: 300rpx;
}
</style>
